<template>
  <div class="page banner">
    <img class="xh" :src="require('../assets/imgs/banner.png')" alt="">
    <div class="vqa">
      <img :src="require('../assets/imgs/banner-vqa.png')" alt="">
      <img :src="require('../assets/imgs/banner-vqa-txt.png')" alt="">
    </div>
    <ul class="judge">
      <li>智能 95%</li>
      <li>精准 98%</li>
      <li>
        决策
        <span></span>
      </li>
    </ul>
  </div>
</template>

<script>
    export default {
        name: "BannerView"
    };
</script>

<style lang="less">
  .banner {
    position: relative;
    img.xh {
      height: 100%;
    }

    .vqa {
      position: absolute;
      left: 15%;
      text-align: center;
      img {
        display: block;
        &:nth-child(2) {
          position: relative;
          left: 20px;
          margin-top: 15px;
        }
      }
    }

    .judge {
      position: absolute;
      bottom: 200px;
      right: 30%;
      font-size: 20px;
      li {
        span {
          display: inline-block;
          width: 51px;
          height: 10px;
          background-image: url("../assets/imgs/star.png");
          background-position: center;
          background-size: contain;
        }

        &:last-child {
          padding-left: 12px;
        }
      }
    }
  }

  .page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    height: 70%;
    background-color: #301C7F;
  }

  .page > h2 {
    font-size: 35px;
    font-weight: normal;
  }

  .page > h2:not(:first-child) {
    margin-top: 30px;
  }

  .page > .subscrip {
    display: flex;
    width: 600px;
    margin-top: 30px;
  }

  .page > .subscrip > h1 {
    flex: 1;
    font-size: 50px;
  }

  .page > .subscrip > h1:nth-child(1) {
    text-align: right;
  }

  .page > .subscrip > h1:nth-child(2) {
    text-align: center;
  }

  .page > .subscrip > h1:nth-child(3) {
    text-align: left;
  }

  @media screen and (max-width: 768px) {
    .banner {
      position: relative;
      height: 50%;
      img.xh {
        width: 100%;
        height: 210px;
      }

      .vqa {
        position: absolute;
        left: 40px;
        text-align: center;
        img {
          width: 100px;
          display: block;
          &:nth-child(2) {
            position: relative;
            left: 0px;
            margin-top: 15px;
          }
        }
      }

      .judge {
        position: absolute;
        bottom: 100px;
        right: 10px;
        font-size: 14px;
        li {
          span {
            display: inline-block;
            width: 51px;
            height: 10px;
            background-image: url("../assets/imgs/star.png");
            background-position: center;
            background-size: contain;
          }

          &:last-child {
            padding-left: 23px;
          }
        }
      }
    }

    .page {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      background-color: #301C7F;
    }

    .page > h2 {
      font-size: 35px;
      font-weight: normal;
    }

    .page > h2:not(:first-child) {
      margin-top: 30px;
    }

    .page > .subscrip {
      display: flex;
      width: 600px;
      margin-top: 30px;
    }

    .page > .subscrip > h1 {
      flex: 1;
      font-size: 50px;
    }

    .page > .subscrip > h1:nth-child(1) {
      text-align: right;
    }

    .page > .subscrip > h1:nth-child(2) {
      text-align: center;
    }

    .page > .subscrip > h1:nth-child(3) {
      text-align: left;
    }
  }
</style>
